<template>
    <view class="home-wrap u-m-b-20">
        <view  class="content-box u-p-20 u-m-l-20 u-m-r-20">
            <view class="zixun-item u-flex u-flex-col u-p-20 u-m-t-20" v-for="(item,index) in artList" @click="jump('/pages/activity/zixundetail',{zixunId:item.id})">
                <view class="zixuntitle u-ellipsis-2 u-p-t-10">{{ item.title }}</view>
                <view class="zixunimg u-p-t-10">
                    <image :src="item.img"></image>
                </view>
                <view class="zixuntime u-p-t-10 u-p-b-10">{{item.createtime}}</view>
            </view>
        </view>
        <view class="x-c" style="width: 100%;">
            <!-- 缺省页 -->
            <shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无资讯内容~"></shopro-empty>

            <!-- 更多 -->
            <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            artList:[],
            isEmpty: true,
            loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
            currentPage: 1,
            lastPage: 1
        };
    },
    created() {
        console.log("===artList",this.artList)
        this.initdata();
        // 触底监听
        uni.$on('uOnReachBottom', data => {
            if (this.currentPage < this.lastPage) {
                this.currentPage += 1;
                this.initdata();
            }
        });
    },
    methods:{
        // 路由跳转
        jump(path, parmas) {
            this.$Router.push({
                path: path,
                query: parmas
            });
        },
        initdata(){
            let that = this;
            that
                .$http(
                    "login.article",
                    {
                        page: that.currentPage
                    },
                    "加载中..."
                )
                .then(res => {
                    if (res.code === 1) {
                        that.artList = [...that.artList, ...res.data.list];
                        that.isEmpty = !that.artList.length;
                        that.lastPage = res.data.last_page;
                        that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
                    }
                });
        },
    }
}
</script>

<style lang="scss" scoped>
page{
    background: #f8f8f8;
}
.zixun-item{
    border-radius: 20rpx;
    background: #fff;
    .zixuntitle{
        width: 100%;
        color: #333;
        font-size: 28rpx;
    }
    .zixunimg{
        width: 100%;
        height: 180rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .zixuntime{
        width: 100%;
        text-align: right;
        color: #cccccc;
        font-size: 24rpx;
    }
}
</style>
